docs(ui): use storybook-i18n addon for locale switching by cylewaitforit · Pull Request #2125 · npmx-dev/npmx.dev

cylewaitforit · 2026-03-17T19:00:09Z

🔗 Linked issue

Related: #1964

🧭 Context

This adds the storybook-i18n for locale switching in the npmx storybook.

📚 Description

This allows stories that have been configured with a translation to be viewed with different translations.

vercel · 2026-03-17T19:00:15Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Mar 20, 2026 5:58pm
npmx.dev	Ready	Preview, Comment	Mar 20, 2026 5:58pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Mar 20, 2026 5:58pm

codecov · 2026-03-17T19:07:18Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-03-17T19:18:14Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5b02564c-e619-4103-bd77-d364a5d86534

📥 Commits

Reviewing files that changed from the base of the PR and between bf4866d and 85d139e.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (3)

.storybook/main.ts
.storybook/preview.ts
pnpm-workspace.yaml

✅ Files skipped from review due to trivial changes (2)

pnpm-workspace.yaml
.storybook/main.ts

📝 Walkthrough

Walkthrough

Appended storybook-i18n to .storybook/main.ts addons and added it to devDependencies and the pnpm workspace catalog. Updated .storybook/preview.ts to add initialGlobals (locale 'en-US' and a locales map), remove the locale toolbar/globalType, introduce a module-level currentI18nInstance and a LOCALE_CHANGED channel handler, set the i18n instance in the decorator created() hook, and make locale optional in decorator typing. Modified Link stories to provide explicit args and to use custom render functions that call $t(...) for translated content.

Possibly related PRs

docs(ui): add dark theme for storybook docs v2 #2172: Modifies .storybook/main.ts and the Storybook client logger shim — overlaps on Storybook config and shim edits.
docs(ui): add stories for Link #1732: Updates the Link component stories — directly overlaps with changes to Link.stories.ts args and render.
feat: add storybook #1270: Edits .storybook/main.ts, .storybook/preview.ts, and workspace/package entries related to Storybook/i18n — directly related to addon and preview configuration changes.

Suggested reviewers

cylewaitforit
alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description adequately explains the purpose of adding the storybook-i18n addon for locale switching in stories.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

.storybook/preview.ts (1)
22-26: Avoid any for the i18n instance and narrow before calling setLocale.

Line 22 and Lines 92-96 currently bypass type checks; a narrow interface here keeps the locale bridge safe and explicit.
💡 Suggested refactor
-let currentI18nInstance: any = null
+type StorybookI18nInstance = {
+  setLocale: (locale: string) => void | Promise<void>
+}
+let currentI18nInstance: StorybookI18nInstance | null = null
@@
-          currentI18nInstance = this.$i18n
+          currentI18nInstance =
+            this.$i18n && typeof this.$i18n.setLocale === 'function'
+              ? (this.$i18n as StorybookI18nInstance)
+              : null
@@
-          if (locale && this.$i18n) {
-            this.$i18n.setLocale(locale)
+          if (locale && currentI18nInstance) {
+            void currentI18nInstance.setLocale(locale)
           }
As per coding guidelines, "Ensure you write strictly type-safe code, for example by ensuring you always check when accessing an array value by index".

Also applies to: 91-96

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a584aa74-dd82-4f31-b2eb-5c2635be10b0

📥 Commits

Reviewing files that changed from the base of the PR and between ad2b174 and 542b245.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

.storybook/main.ts
.storybook/preview.ts
app/components/Link/Link.stories.ts
package.json
pnpm-workspace.yaml

.storybook/preview.ts

ghostdevv

Could you also take a look at that coderabbit suggestion? Let me know if you want some help!

.storybook/preview.ts

Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>

vercel bot deployed to Preview – docs.npmx.dev March 17, 2026 19:02 View deployment

vercel bot deployed to Preview – npmx.dev March 17, 2026 19:02 View deployment

cylewaitforit force-pushed the sb-storybook-i18n branch from 556fd5c to 542b245 Compare March 17, 2026 19:04

vercel bot deployed to Preview – docs.npmx.dev March 17, 2026 19:06 View deployment

vercel bot deployed to Preview – npmx.dev March 17, 2026 19:07 View deployment

cylewaitforit marked this pull request as ready for review March 17, 2026 19:10

coderabbitai bot reviewed Mar 17, 2026

View reviewed changes

.storybook/preview.ts Show resolved Hide resolved

cylewaitforit mentioned this pull request Mar 17, 2026

docs(ui): add ButtonGroup stories to storybook #1964

Merged

docs(ui): use storybook-i18n addon for locale switching

c1f5529

cylewaitforit force-pushed the sb-storybook-i18n branch from 542b245 to c1f5529 Compare March 19, 2026 12:02

vercel bot deployed to Preview – docs.npmx.dev March 19, 2026 12:04 View deployment

vercel bot deployed to Preview – npmx.dev March 19, 2026 12:05 View deployment

ghostdevv requested changes Mar 20, 2026

View reviewed changes

.storybook/preview.ts Outdated Show resolved Hide resolved

fix: PR suggestion

bf4866d

Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>

cylewaitforit requested a review from ghostdevv March 20, 2026 13:38

vercel bot deployed to Preview – npmx.dev March 20, 2026 13:39 View deployment

Merge remote-tracking branch 'origin/main' into sb-storybook-i18n

85d139e

vercel bot deployed to Preview – docs.npmx.dev March 20, 2026 17:57 View deployment

vercel bot deployed to Preview – npmx.dev March 20, 2026 17:58 View deployment

ghostdevv approved these changes Mar 20, 2026

View reviewed changes

ghostdevv added this pull request to the merge queue Mar 20, 2026

Merged via the queue into npmx-dev:main with commit 1cd901f Mar 20, 2026
19 checks passed

github-actions bot mentioned this pull request Mar 20, 2026

chore: release v0.5.0 #2096

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs(ui): use storybook-i18n addon for locale switching#2125

docs(ui): use storybook-i18n addon for locale switching#2125
ghostdevv merged 3 commits intonpmx-dev:mainfrom
cylewaitforit:sb-storybook-i18n

cylewaitforit commented Mar 17, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 17, 2026

Uh oh!

coderabbitai bot commented Mar 17, 2026 •

edited

Loading

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

ghostdevv left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

cylewaitforit commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Mar 17, 2026

Codecov Report

Uh oh!

coderabbitai bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ghostdevv left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cylewaitforit commented Mar 17, 2026 •

edited

Loading

vercel bot commented Mar 17, 2026 •

edited

Loading

coderabbitai bot commented Mar 17, 2026 •

edited

Loading

ghostdevv left a comment •

edited

Loading